﻿//////////////////////////////////////////////////////////////////////////////////
//Fields
var duration = 1000;
var easing = 'swing';
var pause = false;
var secCount = 1;
var arraySize = 10;
var queue = new Array();
var curPos = 0;
var maxId = 30;
var waitSeconds = 5;
//////////////////////////////////////////////////////////////////////////////////





//////////////////////////////////////////////////////////////////////////////////
//Main
$(document).ready(function () {
    InitializeDivs();
    $('#loadingIcons')
        .css({
            top: $('#projectsDiv').position().top,
            left: $('#projectsDiv').position().left + $('#projectsDiv').width() - $('#loadingIcons').width()
        });
    setInterval(function () {
        if (!pause) {
            if (secCount <= waitSeconds) {
                SwitchOpacity("#loadingIconEmpty" + secCount, "#loadingIconFull" + secCount, duration);
                secCount++;
            } else {
                ScrollRight();
                secCount = 1;
                for (var i = 0; i <= 5; i++) {
                    SwitchOpacity("#loadingIconFull" + i, "#loadingIconEmpty" + i, duration);
                }
            }
        }
    }, duration);
});
//////////////////////////////////////////////////////////////////////////////////






//////////////////////////////////////////////////////////////////////////////////
//Div scrolling functions
function ScrollLeft()
{
	// Move divs to positions
	// Create Div4
	// Move it to spot 3
	CreateDiv4();
	// Move div1 to spot 0
	SlideTo($("#div1"), 0);
	// Move div2 to spot 1
	SlideTo($("#div2"), 1);
	// Move div3 to spot 2
	SlideTo($("#div3"), 2);
	//Move div4 to spot 3
	SlideTo($("#div4"), 3);
	setTimeout(function () {
	    // Rename div2 to div1
	    RenameDiv($("#div2"), "div1");
	    // Rename div3 to div2
	    RenameDiv($("#div3"), "div2");
	    // Rename div4 to div3
	    RenameDiv($("#div4"), "div3");
	    EnableClicks();
	}, duration + 100);

}

function ScrollRight()
{
	// Create dic0
	CreateDiv0();
	// Move div3 to spot 4
	SlideTo($("#div3"), 4);
	// Move div2 to spot 3
	SlideTo($("#div2"), 3);
	// Move div1 to spot 2
	SlideTo($("#div1"), 2);
	// Move div0 to spot 1
	SlideTo($("#div0"), 1);
	setTimeout(function () {
	    // Rename div2 to div3
	    RenameDiv($("#div2"), "div3");
	    // Rename div1 to div2
	    RenameDiv($("#div1"), "div2");
	    // Rename div0 to div1
	    RenameDiv($("#div0"), "div1");
	    EnableClicks();
	}, duration + 100);
}
//////////////////////////////////////////////////////////////////////////////////





//////////////////////////////////////////////////////////////////////////////////
//Div creation functions
function CreateDiv0()
{
	$("<Div id='div0'>Div0<div>").prependTo("#projectsDiv");
	$("#div0")
                .css({
                	position: 'relative',
                	left: '-2.5%',
                	top: '50%',
                	width: '0%',
                	height: '0%',
                	backgroundColor: 'Red',
                	float: 'left',
                	opacity: 0
             }).addClass('divBoxs');
    loadContent("#div0","");
}
function CreateDiv4()
{
	$("<Div id='div4'>Div4<div>").appendTo("#projectsDiv");
	$("#div4")
                .css({
                	position: 'relative',
                	left: '10%',
                	top: '50%',
                	width: '0%',
                	height: '0%',
                	backgroundColor: 'Red',
                	float: 'left',
                	opacity: 0
             }).addClass('divBoxs');
    loadContent("#div4", "");
}
function InitializeDivs()
{
	$("<Div id='div1'>Div1<div>").appendTo("#projectsDiv");
	$("#div1")
                .css({
                	position: 'relative',
                	left: '2.5%',
                	top: '35%',
                	width: '20%',
                	height: '30%',
                	backgroundColor: 'Red',
                	float: 'left',
                	opacity: 1
             }).addClass('divBoxs');
	$("<Div id='div2'>Div2<div>").appendTo("#projectsDiv");
	$("#div2")
                .css({
                	position: 'relative',
                	left: '5%',
                	top: '20%',
                	width: '50%',
                	height: '60%',
                	backgroundColor: 'Red',
                	float: 'left',
                	opacity: 1
             }).addClass('divBoxs');
	$("<Div id='div3'>Div3<div>").appendTo("#projectsDiv");
	$("#div3")
                .css({
                	position: 'relative',
                	left: '7.5%',
                	top: '35%',
                	width: '20%',
                	height: '30%',
                	backgroundColor: 'Red',
                	float: 'left',
                	opacity: 1
             }).addClass('divBoxs');
     EnableClicks();
}
//////////////////////////////////////////////////////////////////////////////////





//////////////////////////////////////////////////////////////////////////////////
//Div animation function
function SlideTo(divMove, position)
{
	switch (position)
	{
		case 0:
			$(divMove)
                .animate({
                	position: 'relative',
                	left: '-2.5%',
                	top: '50%',
                	width: '0%',
                	height: '0%',
                	backgroundColor: 'Red',
                	float: 'left',
                	opacity: 0
                }, duration, easing, function ()
                {
                	$(divMove).remove();
                });
			break;
		case 1:
			$(divMove)
                .animate({
                	position: 'relative',
                	left: '2.5%',
                	top: '35%',
                	width: '20%',
                	height: '30%',
                	backgroundColor: 'Red',
                	float: 'left',
                	opacity: 1
                }, duration, easing);
			break;
		case 2:
			$(divMove)
                .animate({
                	position: 'relative',
                	left: '5%',
                	top: '20%',
                	width: '50%',
                	height: '60%',
                	backgroundColor: 'Red',
                	float: 'left',
                	opacity: 1
                }, duration, easing, function ()
                {
                	$(divMove).unbind('click');
				});
			break;
		case 3:
			$(divMove)
                .animate({
                	position: 'relative',
                	left: '7.5%',
                	top: '35%',
                	width: '20%',
                	height: '30%',
                	backgroundColor: 'Red',
                	float: 'left',
                	opacity: 1
                }, duration, easing);
			break;
		case 4:
			$(divMove)
                .animate({
                	position: 'relative',
                	left: '10%',
                	top: '50%',
                	width: '0%',
                	height: '0%',
                	backgroundColor: 'Red',
                	float: 'left',
                	opacity: 0
                }, duration, easing, function ()
                {
                	$(divMove).remove();
                });
			break;
	}

}
//////////////////////////////////////////////////////////////////////////////////


//Helper function to keep track of div locations
function RenameDiv(divToChange, newName)
{
	$(divToChange).attr('id', newName);
}
/////////////////////////////////////////////////////////////////////////////////

//Helper function to fade in and out an item at the same time. 
function SwitchOpacity(itemToFadeOut, itemToFadeIn, duration) {
    $(itemToFadeOut).animate({ opacity: 0.0 }, duration);
    $(itemToFadeIn).animate({ opacity: 1.0 }, duration);
}
////////////////////////////////////////////////////////////////////////////////


//Clicks endable disable
function DisableClicks() {
    $("#div3").unbind('click');
    $("#div1").unbind('click');
//    $("#arrowLeft").unbind('click');
//    $("#arrowRight").unbind('click');
}

function EnableClicks(){
    $("#div1")
                .click(function () {
                    DisableClicks();
                    ScrollRight();
                    pause = true;
                });
    $("#div3")
                .click(function () {
                    DisableClicks();
                    ScrollLeft();
                    pause = true;
                });
//     $("#leftArrow")
//                .click(function () {
//                    DisableClicks();
//                    ScrollLeft();
//                    pause = true;
//                });
//     $("#rightArrow")
//                .click(function () {
//                    DisableClicks();
//                    ScrollRight();
//                    pause = true;
//                });
}

function loadContent(divId) {
    $(divId).html(content);
}

function loadQueue() {
    var tempPos = curPos;
    AJAX("GetProjectBadge", getProjectId(tempPos), function (data) {
        setItem(
    });
}

function initializeQueue(){
    
}

function getContent(){
    var item = queue.shift();
    var nextId = getNextId(item[0])
    AJAX("GetProjectBadge", nextId, function (data) {
        var temp = new Array();
        temp[0] = nextId;
        temp[1] = data;
        queue.push(temp);
    });
    return queue.shift();
}

function getNextId(id){
    id++;
    if(id>maxId){
        id = 0;
    }
    return id;
}